<template>
	<view class="model">
		<!-- 告警等级轮播模块 -->
		<!-- 轮播盒子 -->
		<view class="swiper-box">
			<template v-if="swiperData.length>0">
				<swiper :current='current' class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" @change="swiperChange" next-margin="60rpx" previous-margin="60rpx">
					<swiper-item v-for="(item,index) in swiperData" :key='index' :current-item-id="item.id">
						<view :class="['swiper-item',current == index ? 'swiperActive':'']">
							<u-row align='top' class="swiper-row">
								<u-col :span="4" text-align="right" class="label">告警时间</u-col>
								<u-col :span="8" class="alarm-text alarm-text0">{{item.startTime}}</u-col>
							</u-row>
							<u-row align='top' class="swiper-row">
								<u-col :span="4" text-align="right" class="label">告警等级</u-col>
								<u-col :span="8" :class="['alarm-text','alarm-text'+item.alarmLevel]">{{deviceStatus(item.alarmLevel)}}</u-col>
							</u-row>
							<u-row align='top' class="swiper-row">
								<u-col :span="4" text-align="right" class="label">告警内容</u-col>
								<u-col :span="8">
									<text class="u-line-4 alarm-text alarm-text0">{{item.alarmDesc}}</text>
								</u-col>
							</u-row>
						</view>
					</swiper-item>
				</swiper>
			</template>
			<view class="noData" v-if="swiperData.length == 0">
				暂无告警
			</view>
			<view class="page-content" v-if="swiperData.length > 0">
				{{current+1}}/{{swiperData.length}}
			</view>
		</view>
		<!-- 轮播结束 -->
	</view>
</template>

<script>
	import {chooseAlarmLevel} from "@/common/utils/index.js";
	export default {
		props:{
			swiperData:{
				type:Array,
				default:()=>[]
			}
		},
		data(){
			return{
				current:0, //swiper页码
			}
		},
		computed:{
			deviceStatus(){
				return function(val){
					const name = chooseAlarmLevel(val);
					return name
				}
			}
		},
		methods:{
			swiperChange(e){
				this.current = e.target.current
			}
		}
	}
</script>

<style scoped lang="scss">
$info-label: #919297;
.model{
	height: inherit;
}
.swiper-box{
	height: 100%;
	position: relative;
	.swiper{
		height: 100%;
		.swiper-item{
			width: 560rpx;
			min-height: 360rpx;
			margin: 60rpx auto 0rpx auto;
			border-radius: 30rpx;
			box-shadow: 0 0 10rpx #999;
			transition: transform 0.3s;
			padding: 64rpx 0;
			.swiper-row{
				margin-bottom: 40rpx;
				&:last-child{
					margin-bottom: 0;
				}
			}
			.label{
				color: $info-label;
				font-size: 26rpx;
			}
			.alarm-text{
				font-size: 26rpx;
				padding-right: 20rpx;
			}
			.alarm-text0{
				color: $level0;
			}
			.alarm-text1{
				color: $level1;
			}
			.alarm-text2{
				color: $level2;
			}
			.alarm-text3{
				color: $level3;
			}
			.alarm-text4{
				color: $level4;
			}
			.alarmMsg{
				width: 100%;
				// display: flex;
				max-height: 150rpx;
				overflow: hidden;
			}
		}
		.swiperActive{
			// width: 666rpx;
			// height: 420rpx;
			transform: scale(1.1);
		}
	}
	.page-content{
		position: absolute;
		right: 90rpx;
		bottom: 60rpx;
		z-index: 60;
		padding: 8rpx 15rpx;
		background-color: rgba(0,0,0,0.5);
		color: #FFFFFF;
		border-radius: 50%;
	}
	.noData{
		text-align: center;
		color: #999;
		font-size: 25rpx;
		padding-top: 30rpx;
	}
}
</style>
